<template>
  <div class="container">
    <el-table
      :data="articlist"
      style="width: 100%">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="title" label="文章标题" auto-with>
        <template #default="scope">
          <div>
            {{scope.row.title}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="pic" label="封面" auto-with>
        <template #default="scope">
          <div>
            <img :src="scope.row.pic || `https://free-img.400040.xyz/4/2024/06/24/66794c0b3c103.jpg`" alt="">
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="text" label="内容梗概" auto-with>
        <template #default="scope">
          <div>
            {{scope.row.title}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="time" label="创建时间" auto-with>
        <template #default="scope">
          <div>
            {{$moment(scope.row.time).format('YYYY年MM月DD日 HH时')}}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="autor" label="作者" auto-with>
        <template #default="scope">
          <div>
            {{scope.row.autor || '爱吃罗非鱼' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="contorl" label="操作" auto-with>
      <template #default="scope">
        <span style="cursor: pointer;marginLeft: 10px;color:#79BBFF" @click="contorl(scope.row, 'View')"><el-icon color="#79BBFF"><i-ep-View /></el-icon> 查看 </span>
        <span style="cursor: pointer;marginLeft: 10px;color:#79BBFF" @click="contorl(scope.row, 'Edit')"><el-icon color="#79BBFF"><i-ep-Edit /></el-icon> 编辑 </span>
        <span style="cursor: pointer;marginLeft: 10px;color:red" @click="contorl(scope.row, 'Delete')"><el-icon color="red"><i-ep-Delete /></el-icon> 删除 </span>
      </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="pagination.size"
      @current-change="hanldlecurrent"
      v-model="pagination.currentpage"
      :total="pagination.count">
    </el-pagination>
  </div>
</template>


<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { searchdata, deletearticle } from "../apis/artic"
onMounted(()=>{
  getdata()
})
const router = useRouter()
const articlist = ref([])
const getdata = ()=>{
  let param = {
    page: pagination.value.currentpage,
    size: pagination.value.size
  }
  searchdata(param).then(res=>{
    console.log(res.data);
    if (res.data.isok) {
      articlist.value = res.data.data
      pagination.value.count = res.data.count
    }
  })
}
const pagination = ref({
  currentpage: 1,
  size: 10,
  count: 0
})
const hanldlecurrent = (page)=>{
  pagination.value.currentpage = page
  getdata()
}
const contorl = (row, type)=>{
  let param
  if (type == 'Delete') {
    console.log('删除', row);
    param = {_id:row._id}
    deletearticle(param).then(res=>{
      console.log(res.data);
      if (res.data.isok) {
        ElNotification({
          title: 'Success',
          message: '删除成功',
          type: 'success',
        })
        getdata()
      }
    })
  }
  if (type == 'View') {
    console.log('查看', row);
    router.push({path: '/createartic', query: {_id: row._id, isdisabled: true, isshowtools: false}})
  }
  if (type == 'Edit') {
    console.log('编辑', row);
    router.push({path: '/createartic', query: {_id: row._id, isdisabled: false, isshowtools: true}})
  }
}

</script>


<style lang="less" scoped>
.container{
  padding: 40px;
  background-color: #fff;
  img{
    width: 150px;
    height: 150px;
    object-fit: cover;
  }
}

</style>